<template>
  <div>
    <div class="img"><img src="../../../assets/images/aus1.jpg" alt="" /></div>
    <div class="bj">
      <div class="Breadcrumb">
        <div>
          <span>网站首页></span><span>关于酒庄></span><span>经营理念</span>
        </div>
      </div>
      <div class="box">
        <div class="box-img">
          <div><img src="../../../assets/images/idea1.jpg" alt="" /></div>
          <div><img src="../../../assets/images/idea2.jpg" alt="" /></div>
          <div><img src="../../../assets/images/idea3.jpg" alt="" /></div>
        </div>
      </div>
      <!-- 返回顶部按钮 -->
      <div class="gotop" v-if="checked">
        <div @click="jumpwinery">
          <img src="../../../assets/images/aus2.jpg" alt="" /><span
            >燕庄介绍</span
          >
        </div>
        <div @click="jumpidea">
          <img src="../../../assets/images/aus3.jpg" alt="" /><span
            >经营理念</span
          >
        </div>
        <div @click="jumpcertificate">
          <img src="../../../assets/images/aus4.jpg" alt="" /><span
            >荣誉证书</span
          >
        </div>
        <div @click="gotop">
          <img src="../../../assets/images/aus5.jpg" alt="" /><span
            >行业优势</span
          >
        </div>
        <div class="btn" @click="gotop">
          <img src="../../../assets/images/btn4.png" alt="返回顶部" /><span
            >返回顶部</span
          >
        </div>
      </div>
      <!-- 底部导航 -->
      <bottom-nav></bottom-nav>
    </div>
  </div>
</template>

<script>
import bottomNav from "../../../components/bottomNav.vue";
export default {
  name: "idea",
  components: {
    bottomNav,
  },
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    chnegeChecked() {
      let that = this;
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (scrollTop > 700) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //跳转到酒庄介绍
    jumpwinery() {
      this.$router.push({ path: "/frontPage/winery" });
    },
    //跳转到经营理念
    jumpidea() {
      this.$router.push({ path: "/frontPage/idea" });
    },
    //跳转荣誉证书
    jumpcertificate() {
      this.$router.push({ path: "/frontPage/certificate" });
    },
    // 返回顶部
    gotop() {
      document.documentElement.scrollTop = 0;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.chnegeChecked, true);
  },
  beforeRouteEnter(to, from, next) {
    // A跳转到B，B页面停留在A页面的滚动位置；解决方法：将scrollTop设置为0
    window.scroll(0, 0);
    next();
  },
};
</script>

<style lang="less" scoped>

@media screen and (min-width: 1029px){
  .img {
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 4%;
    position: relative;
    background: url("../../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .Breadcrumb {
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: #f1f1f1;
      div {
        margin-left: 240px;
        text-align: left;
      }
    }
    .box {
      width: 80%;
      margin: auto;
      margin-bottom: 15%;
      .box-img {
        margin-top: 128px;
        display: flex;
        div:nth-child(2) {
          margin-top: 20px;
          margin-left: 100px;
        }
        div:nth-child(3) {
          position: absolute;
          right: 250px;
          bottom: 220px;
        }
      }
    }
    // 返回顶部按钮
    .gotop {
      width: 100px;
      position: fixed;
      right: 50px;
      bottom: 366px;
      font-size: 15px;
      background-color: #ffffff;
      div {
        width: 100px;
        height: 100px;
        padding-bottom: 10px;
        border: 1px solid #dddddd;
        img {
          margin-top: 20px;
          padding-bottom: 10px;
        }
        span {
          display: block;
        }
      }
      .btn {
        width: 100px;
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px){
  .img {
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 4%;
    position: relative;
    background: url("../../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .Breadcrumb {
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: #f1f1f1;
      div {
        /*margin-left: 240px;*/
        text-align: left;
      }
    }
    .box {
      width: 90%;
      margin: auto;
      .box-img {
        padding-top: 100px;
        margin-bottom: 100px;
        display: flex;
        div:nth-child(1) {
          img{
            width: 100%;
          }
        }
        div:nth-child(2) {
          img{
            width: 100%;
          }
          margin-top: 20px;
          margin-left: 100px;
        }
        div:nth-child(3) {
          display: none;
          position: absolute;
          right: -67px;
          bottom: 100px;
          img{
            width: 50%;
          }
        }
      }
    }
    // 返回顶部按钮
    .gotop {
      width: 100px;
      position: fixed;
      right: 50px;
      bottom: 366px;
      font-size: 15px;
      background-color: #ffffff;
      div {
        width: 100px;
        height: 100px;
        padding-bottom: 10px;
        border: 1px solid #dddddd;
        img {
          margin-top: 20px;
          padding-bottom: 10px;
        }
        span {
          display: block;
        }
      }
      .btn {
        width: 100px;
      }
    }
  }
}
@media screen and (max-width: 749px){
  .img {
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 4%;
    position: relative;
    background: url("../../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .Breadcrumb {
      width: 100%;
      height: 34px;
      font-size: 12px;
      line-height: 34px;
      background-color: #f1f1f1;
      div {
        /*margin-left: 240px;*/
        text-align: left;
      }
    }
    .box {
      width: 99%;
      margin: auto;
      padding-bottom: 29px;
      .box-img {
        padding-top: 100px;
        margin-bottom: 100px;
        display: flex;
        div:nth-child(1) {
          position: absolute;
          left: -38px;
          top: 50px;
          img{
            width: 30%;
          }
        }
        div:nth-child(2) {
          img{
            width: 100%;
          }
          margin-top: 50px;
          margin-left: 50px;
        }
        div:nth-child(3) {
          width: 30%;
          position: absolute;
          right: 0px;
          bottom: 80px;
          img{
            width: 100%;
          }
        }
      }
    }
    // 返回顶部按钮
    .gotop {
      width: 100px;
      position: fixed;
      right: 50px;
      bottom: 366px;
      font-size: 15px;
      background-color: #ffffff;
      div {
        width: 100px;
        height: 100px;
        padding-bottom: 10px;
        border: 1px solid #dddddd;
        img {
          margin-top: 20px;
          padding-bottom: 10px;
        }
        span {
          display: block;
        }
      }
      .btn {
        width: 100px;
      }
    }
  }
}
</style>